<template>
  <div>
    <a-card :bordered="false" style="box-shadow: none;">
        <title-name title="团组织基础信息"></title-name>
        <a-form-model class="flex-model-form"
          ref="addForm"
        >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="组织名称">
                <a-input v-model="detail.youthOrgName" disabled />
              </a-form-model-item>
           </a-col>
            <a-col :span="8">
              <a-form-model-item label="上级组织">
                <a-input v-model="detail.parentName" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="组织类型">
                <a-input v-model="detail.orgTypeName" disabled />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="组织状态">
                <a-input v-model="detail.orgStatus === 0 ? '审批中' : '正常'" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="组织成立时间">
                <a-input v-model="detail.orgRegtime" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="组织书记">
                <a-input v-model="detail.orgSecretary" disabled />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="组织副书记">
                <a-input v-model="detail.orgDeputySecretary" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="管理人员">
                <a-input v-model="detail.orgManager" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="换届时间">
                <a-input v-model="detail.transitionTime" disabled />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
    </a-card>
    <a-card :bordered="false" style="box-shadow: none;">
        <title-name title="委员信息"></title-name>
        <!-- 表格 -->
        <a-table :columns="columns" rowKey="id" :data-source="committeeList" bordered size="small" :pagination="false" :scroll="{ y: 300 }">
        </a-table>
    </a-card>
  </div>
</template>

<script>
import { Affix } from 'ant-design-vue' // ant
import { STable } from '@/components' // 表格
export default {
  name:'a'+ Date.now(),
  // name: 'PartyDetailItem',
  components: {
    STable,
    AAffix: Affix,
  },
  props: {
    detailObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    detail() {
      return this.detailObj;
    },
    committeeList() {
      return this.detailObj?.committeeList || []
    }
  },
  data() {
      return {
        // loadData: (parameter) => {
        //     const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
        //     return this.getTableList(requestParameters).then((res) => {
        //       return res
        //     });
        // }, // 加载数据方法 必须为 Promise 对象
        // committeeList: [],
        // detail: {
        //   form: {
        //     youthOrgName: '',
        //     parentName: '',
        //     orgTypeName: '',
        //     orgStatus: '',
        //     orgSecretary: '',
        //     deputySecretary: '',
        //     manager: '',
        //     orgRegtime: '',
        //     transitionTime: '',
        //   }
        // },
        columns: [
          {
              title: '序号',
              width: 80,
              dataIndex: 'index',
              customRender() {
                  return arguments[2] + 1
              },
          },
          {
              title: '委员名称',
              ellipsis: true,
              dataIndex: 'userName',
          },
          {
              title: '团内职务',
              ellipsis: true,
              dataIndex: 'youthPost',
          },
          {
              title: '员工编号',
              ellipsis: true,
              dataIndex: 'employeeNum',
          },
          {
              title: '电话号码',
              dataIndex: 'phone',
              ellipsis: true,
          },
          {
              title: '当前职务',
              dataIndex: 'currentPosition',
              ellipsis: true,
          }
        ]
      }
  },
  mounted() {
  },
  methods: {
    handleClose() {
      this.$multiTab.close(this.$route.fullpath);
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-form-item{
    display: flex;
  }
  .btn_box .ant-affix{
    overflow: hidden;
    button {
      float: right;
    }
  }
</style>
